<template>
  <div id="login">
    <div id="form_space">
      <div align="center">
        <h1>{{register_title}}</h1>
        <p>{{register_adress}}</p>
        <el-tabs v-model="activeName" @tab-click="handleClick" style="padding-left: 2%;width: 100px">
          <el-tab-pane label="学生" name="student"></el-tab-pane>
          <el-tab-pane label="企业" name="enter"></el-tab-pane>
        </el-tabs>
      </div>
      <div style="padding:20px;" v-show="showstu">
        <el-form ref="form" :model="stu_form">
          <el-form-item>
            <el-input
              v-model="stu_form.uid"
              prefix-icon="el-icon-user"
              placeholder="请输入学号/账号"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
                v-model="stu_form.name"
                prefix-icon="el-icon-user-solid"
                placeholder="请输入姓名/昵称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-cascader :options="options" clearable style="width: 360px" placeholder="请选择教育信息" @change="handleChange"></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="stu_form.email"
              prefix-icon="el-icon-message"
              placeholder="请输入邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-row :gutter="16">
              <el-col :span="16">
                <el-input
                  v-model="stu_form.code"
                  prefix-icon="el-icon-key"
                  placeholder="请输入邮箱验证码"
                ></el-input>
              </el-col>
              <el-col :span="8">
                <el-button
                  :disabled="verify_button_data.button_state"
                  @click="verify_code()"
                >{{verify_button_data.button_title}}</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="stu_form.user_password"
              prefix-icon="el-icon-lock"
              show-password
              placeholder="请输入用户密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="stu_form.user_password_verify"
              prefix-icon="el-icon-lock"
              show-password
              placeholder="请再次输入用户密码"
            ></el-input>
          </el-form-item>
          <el-form-item align="center">
            <el-button type="success" icon="el-icon-back" @click="register()">注册</el-button>
          </el-form-item>
          <el-form-item>
            <el-link type="danger" style="float:left" @click="to('/')">登录</el-link>
            <el-link type="primary" style="float:right" @click="to('/forget/password')">找回密码？</el-link>
          </el-form-item>
        </el-form>
      </div>
      <div style="padding:20px;" v-show="showen">
        <el-form ref="form" :model="stu_form">
          <el-form-item>
            <el-input
                v-model="stu_form.user_pet_name"
                prefix-icon="el-icon-user"
                placeholder="请输入用户"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
                v-model="stu_form.user_email"
                prefix-icon="el-icon-message"
                placeholder="请输入邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-row :gutter="16">
              <el-col :span="16">
                <el-input
                    v-model="stu_form.user_email_code"
                    prefix-icon="el-icon-key"
                    placeholder="请输入邮箱验证码"
                ></el-input>
              </el-col>
              <el-col :span="8">
                <el-button
                    :disabled="verify_button_data.button_state"
                    @click="verify_code()"
                >{{verify_button_data.button_title}}</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-input
                v-model="stu_form.user_password"
                prefix-icon="el-icon-lock"
                show-password
                placeholder="请输入用户密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
                v-model="stu_form.user_password_verify"
                prefix-icon="el-icon-lock"
                show-password
                placeholder="请再次输入用户密码"
            ></el-input>
          </el-form-item>
          <el-form-item align="center">
            <el-button type="success" icon="el-icon-back" @click="register()">注册</el-button>
          </el-form-item>
          <el-form-item>
            <el-link type="danger" style="float:left" @click="to('/')">登录</el-link>
            <el-link type="primary" style="float:right" @click="to('/forget/password')">找回密码？</el-link>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      a:1,
      b:1,
      c:1,
      identifyCodes: '1234567890',
      identifyCode: '',
      options: [{
        value: '昆明学院',
        label: '昆明学院',
        children: [{
          value: '信息工程学院',
          label: '信息工程学院',
          children: [{
            value: '软件工程',
            label: '软件工程',
            children: [{
              value: '1班',
              label: '1班',
            }, {
              value: '2班',
              label: '2班',
            }, {
              value: '3班',
              label: '3班',
            }]
          }, {
            value: '计算机科学与技术',
            label: '计算机科学与技术',
            children: [{
              value: '2班',
              label: '2班',
            }, {
              value: '3班',
              label: '3班',
            }]
          }, {
            value: '通信工程',
            label: '通信工程',
            children: [{
              value: '1班',
              label: '1班',
            }, {
              value: '2班',
              label: '2班',
            }]
          }, {
            value: '物联网',
            label: '物联网',
            children: [{
              value: '1班',
              label: '1班',
            }]
          }]
        }]
      }],
      showstu:true,
      showen:false,
      register_title: "大学生就业信息管理系统",
      register_adress: "用户注册",
      activeName: 'student',
      verify_button_data: {
        button_title: "获取验证码",
        button_state: false,
      },
      stu_form: {
        name: "",
        code:"",
        email: "",
        user_password: "",
        user_password_verify: "",
        school:"",
        department:"",
        major:"",
        cla:"",
      },
      remember_password: false,
    };
  },
  methods: {
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
            this.randomNum(0, this.identifyCodes.length)
            ]
      }

    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    handleClick(tab) {
      if(tab.name=="student"){
        this.showen = !this.showen;
        this.showstu = !this.showstu;
      }else{
        this.showstu = !this.showstu;
        this.showen = !this.showen;
      }
    },
    handleChange(value) {
      this.stu_form.school = value[0];
      this.stu_form.department = value[1];
      this.stu_form.major = value[2];
      this.stu_form.cla = value[2]+value[3];
    },
    register() {
      if(this.stu_form.code != this.identifyCode){
        this.$message.error("验证码错误");
        this.a = 0;
      }
      if(this.stu_form.user_password != this.stu_form.user_password_verify && this.stu_form.user_password != null){
        this.$message.error("两次输入的密码不一致");
        this.stu_form.user_password_verify = "";
        this.stu_form.user_password = "";
        this.b = 0;
      }
      if(this.stu_form.email == null || this.stu_form.user_password == null ||this.stu_form.name == null || this.stu_form.uid==null || this.stu_form.school==null
      ||this.stu_form.department == null || this.stu_form.major==null || this.stu_form.cla == null
      ){
        this.$message.error("请正确输入您的信息");
        this.c = 0;
      }
      if(this.a == 1 && this.b==1 && this.c==1) {
        this.$axios({
          url: this.$axios.defaults.baseURL+"/student/registstu",
          method: "post",
          params: {
            email: this.stu_form.email,
            password: this.stu_form.user_password,
            name:this.stu_form.name,
            uid:this.stu_form.uid,
            type:this.activeName,
            cla:this.stu_form.cla,
            school:this.stu_form.school,
            major:this.stu_form.major,
            department:this.stu_form.department
          }
        }).then(res => {
          if (res.data.status) {
            this.$message.success(res.data.msg);
            setTimeout(() => {
              this.$router.push("/");
            }, 1500);
          } else {
            this.$message.error(res.data.msg);
          }
        })
      }
    },
    verify_code() {
      this.makeCode(this.identifyCodes, 4)
      this.$message.success("验证码发送成功请您查看邮箱");
      this.verify_button_data.button_title = 60;
      this.verify_button_data.button_state = true;
      this.$axios({
        url:this.$axios.defaults.baseURL+"/student/sendcode",
        method:"post",
        params:{
          code:this.identifyCode,
          mail:this.stu_form.email,
          title:"账号注册"
        }
      })
      this.count_time_down();
    },
    count_time_down() {
      if (this.verify_button_data.button_title != 0) {
        setTimeout(() => {
          this.verify_button_data.button_title =
            this.verify_button_data.button_title - 1;
          this.count_time_down();
        }, 1000);
      } else {
        this.verify_button_data.button_title = "再次获取验";
        this.verify_button_data.button_state = false;
      }
    },
    to(link){
      this.$router.push(link)
    },
  },
};
</script>
<style scoped>
h1 {
  color: #606266;
}
p {
  color: #606266;
}
#login {
  min-height: 100vh;
}
#form_space {
  border-radius: 10px;
  position: absolute;
  top: 20px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 600px;
  width: 400px;
}
</style>